<template>
  <div class="app-container">
    <div class="filter-container">
      {{ $t("DailyDataSummary.channel") }}:

      <el-select
        v-model="channelId"
        @change="changeChannel"
        style="margin-right: 10px"
      >
        <el-option
          v-for="item in channelList"
          :key="item.id"
          :label="item.channename"
          :value="item.id"
        />
      </el-select>
      {{ $t("DailyDataSummary.serverlist") }}:
      <el-select
        v-model="selectServerList"
        filterable
        clearable
        multiple
        placeholder="请选择"
        @change="onSelectServerListChange"
        style="margin-right: 10px"
      >
        <div>
          <el-link @click="onSelectAllServer" style="margin: 10px"
            >全选</el-link
          >
          <el-link @click="onClearAllServer" style="margin: 10px">清空</el-link>
          <el-link style="margin: 10px" @click="onReverseServer">反选</el-link>
          <el-option
            v-for="item in serverList"
            :key="item.serverId"
            :label="item.serverName"
            :value="item.serverId"
          >
          </el-option>
        </div>
      </el-select>

      {{ $t("DailyDataSummary.device") }}:
      <el-select
        v-model="deviceType"
        style="margin-right: 10px"
        @change="changeDevice"
      >
        <el-option
          v-for="item in deviceListOptions"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      {{ $t("DailyDataSummary.date") }}:
      <el-date-picker
        v-model="startTime"
        type="datetime"
        style="margin-right: 5px"
      />
      <el-date-picker
        v-model="endTime"
        type="datetime"
        style="margin-right: 10px"
      />
      <el-button v-waves type="primary" icon="el-icon-search" @click="getList">
        {{ $t("table.search") }}
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        {{ $t("table.export") }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        :label="$t('DailyDataSummary.datecol')"
        align="center"
        width="105px"
      >
        <template slot-scope="{ row }">
          <span> {{ getShowTime(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.channel')"
        width="105px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ getChannelName(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.registerAccountNum')"
        width="105px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.registerAccountNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.registerRoleNum')"
        width="105px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.registerRoleNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.totalLoginNum')"
        width="105px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.totalLoginNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.averageOnline')"
        align="center"
        width="105px"
      >
        <template slot-scope="{ row }">
          <span>{{ row.averageOnline }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.averageNeiGuaOnline')"
        class-name="status-col"
        width="105px"
      >
        <template slot-scope="{ row }">
          <span>{{ row.averageNeiGuaOnline }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.chargePeopleNum')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.chargePeopleNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.chargeTimes')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.chargeTimes }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('DailyDataSummary.chargeMoney')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.chargeMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.arpu')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.arpu }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.chargePercent')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.chargePercent }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.newRegisterCharge')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.newRegisterCharge }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('DailyDataSummary.newChargePercent')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.newChargePercent }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.newChargeMoney')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.newChargeMoney }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('DailyDataSummary.newArpu')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.newArpu }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('DailyDataSummary.oldCharge')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.oldCharge }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('DailyDataSummary.accountLTV')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.accountLTV }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('DailyDataSummary.roleLTV')"
        align="center"
        width="105px"
        class-name="fixed-width"
      >
        <template slot-scope="{ row }">
          <span>{{ row.roleLTV }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script lang="ts">
//每日数据汇总
import Pagination from "@/components/Pagination/index.vue";
import { ChannelConfig } from "@/config/ChannelConfig";
import { HttpClient } from "@/httpclient/HttpClient";
import { DailyDataSummaryModel } from "@/store/model/DailyDataSummaryModel";
import { DemoExcel } from "@/store/model/DemoExcel";
import { DeviceModel } from "@/store/model/DeviceModel";
import { ZoneModel } from "@/store/model/ZoneModel";
import { formatJson } from "@/utils";
import { DateUtil } from "@/utils/DateUtil";
import { exportJson2Excel } from "@/utils/excel";
import { Logger } from "@/utils/Logger";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "DailyDataSummary",
  components: {
    Pagination,
  },
  filters: {},
})
export default class extends Vue {
  private tableKey = 0;
  private list: DailyDataSummaryModel[] = [];
  private total = 0;
  private listLoading = true;

  private channelId: number = 0;

  private zoneId: number = 0;
  private zoneList: Array<ZoneModel> = ZoneModel.modelList;

  private deviceType: number = DeviceModel.DeviceType.All;

  private deviceListOptions = [
    {
      label: DeviceModel.NameMap.get(DeviceModel.DeviceType.All),
      key: DeviceModel.DeviceType.All,
    },
    {
      label: DeviceModel.NameMap.get(DeviceModel.DeviceType.Android),
      key: DeviceModel.DeviceType.Android,
    },
    {
      label: DeviceModel.NameMap.get(DeviceModel.DeviceType.Ios),
      key: DeviceModel.DeviceType.Ios,
    },
    {
      label: DeviceModel.NameMap.get(DeviceModel.DeviceType.Other),
      key: DeviceModel.DeviceType.Other,
    },
  ];

  private startTime: number = DateUtil.now();
  private endTime: number = DateUtil.now();

  //列表查询选项
  private listQuery = {
    page: 1, //第几页
    limit: 20, //一页多少个
    sort: "+id", //排序方式
  };

  private dialogFormVisible = false; //dialog是否显示
  private rules = {};

  private downloadLoading = false;
  private tempShowData: DemoExcel = new DemoExcel();

  private serverList: Array<ZoneModel> = ZoneModel.selectList;

  private selectServerList: Array<number> = [];
  private serverListAllChecked: boolean;

  private channelList: Array<ChannelConfig> = [];

  created() {
    this.channelId = 0;
    this.channelList = ChannelConfig.getList();
    let date: Date = new Date();
    this.startTime = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate()
    ).getTime();
    this.endTime = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate() + 1
    ).getTime();
    Logger.log("screated", this.serverList, this.endTime);
    HttpClient.queryServerAreaList(this.channelId, () => {
      this.serverList = ZoneModel.selectList;
      this.getList();
    });
  }

  private getShowTime(model: DailyDataSummaryModel) {
    return DateUtil.formatDateStr3(model.time);
  }

  private getChannelName(model: DailyDataSummaryModel) {
    if (this.channelId == 0) {
      return "All";
    } else {
      return ChannelConfig.getChannelName(this.channelId, this.channelList);
    }
  }

  private changeDevice() {
    Logger.log("changeDevice==", this.deviceType);
  }

  private onReverseServer() {
    let tempList: Array<number> = [];
    for (let i = 0; i < this.serverList.length; i++) {
      if (this.selectServerList.indexOf(this.serverList[i].serverId) == -1) {
        tempList.push(this.serverList[i].serverId);
      }
    }
    this.selectServerList = tempList;
    Logger.log("onReverseServer==", this.selectServerList);
  }

  private onSelectServerListChange() {
    Logger.log("onSelectServerListChange==", this.selectServerList);
  }

  private onClearAllServer() {
    this.selectServerList = [];
  }

  private onSelectAllServer() {
    this.selectServerList = [];
    for (let i = 0; i < this.serverList.length; i++) {
      this.selectServerList[i] = this.serverList[i].serverId;
    }
    Logger.log("onSelectAllServer=", this.selectServerList);
  }

  private changeZone() {
    Logger.log("changeZone==", this.zoneId);
  }

  private changeChannel() {
    Logger.log("changeChannel=====", this.channelId);
    HttpClient.queryServerAreaList(this.channelId, () => {
      this.serverList = ZoneModel.selectList;
      this.getList();
    });
  }

  private async getList() {
    this.listLoading = true;
    DailyDataSummaryModel.getShowList(
      this.channelId,
      this.listQuery,
      this.selectServerList,
      this.deviceType,
      this.startTime,
      this.endTime,
      (result: Array<DailyDataSummaryModel>) => {
        this.list = result;
        this.total = DailyDataSummaryModel.totalNum;
        this.listLoading = false;
      }
    );
  }

  private sortChange(data: any) {
    const { prop, order } = data;
    Logger.log("sortChange===", data);
    this.listQuery.page = 1;
    if (prop === "id") {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.getList();
    } else if (prop == "time") {
      if (order === "ascending") {
        this.listQuery.sort = "+time";
      } else {
        this.listQuery.sort = "-time";
      }
      this.getList();
    }
  }

  private handleDownload() {
    this.downloadLoading = true;
    const filterVal = [
      "date",
      "channel",
      "registerAccountNum",
      "registerRoleNum",
      "totalLoginNum",
      "averageOnline",
      "averageNeiGuaOnline",
      "averageOnline",
      "chargePeopleNum",
      "chargeTimes",
      "chargePeopleNum",
      "arpu",
      "chargePercent",
      "newRegisterCharge",
      "newChargeMoney",
      "newArpu",
      "oldCharge",
      "accountLTV",
      "roleLTV",
    ];
    const tHeader = [
      "日期",
      "渠道",
      "注册数目",
      "创角数",
      "总登录数",
      "平均在线",
      "平均内挂在线",
      "充值人数",
      "充值次数",
      "充值金额",
      "付费ARPU",
      "付费率",
      "新增充值人数",
      "新增付费率",
      "新增充值金额",
      "新增arpu",
      "老用户充值",
      "账号首日LTV",
      "角色首日LVT",
    ];
    let excelList: Array<object> = [];
    for (let i = 0; i < this.list.length; i++) {
      let obj: object = {};
      obj["date"] = this.getShowTime(this.list[i]);
      obj["channel"] = this.getChannelName(this.list[i]);
      obj["registerAccountNum"] = this.list[i].registerAccountNum;
      obj["registerRoleNum"] = this.list[i].registerRoleNum;
      obj["totalLoginNum"] = this.list[i].totalLoginNum;
      obj["averageOnline"] = this.list[i].averageOnline;
      obj["averageNeiGuaOnline"] = this.list[i].averageNeiGuaOnline;
      obj["chargePeopleNum"] = this.list[i].chargePeopleNum;
      obj["chargeTimes"] = this.list[i].chargeTimes;
      obj["chargeMoney"] = this.list[i].chargeMoney;
      obj["arpu"] = this.list[i].arpu;
      obj["chargePercent"] = this.list[i].chargePercent;
      obj["newRegisterCharge"] = this.list[i].newRegisterCharge;
      obj["newChargeMoney"] = this.list[i].newChargeMoney;
      obj["newArpu"] = this.list[i].newArpu;
      obj["oldCharge"] = this.list[i].oldCharge;
      obj["accountLTV"] = this.list[i].accountLTV;
      obj["roleLTV"] = this.list[i].roleLTV;
      excelList[i] = obj;
    }
    const data = formatJson(filterVal, excelList);
    Logger.log("handleDownload====", data);
    exportJson2Excel(tHeader, data, "每日数据汇总");
    this.downloadLoading = false;
  }
}
</script>
